<template>
  <view class="page">
    <!-- 1. 反馈类型 -->
    <view class="card">
      <view class="title">反馈类型</view>
      <view class="type-row">
        <view
          v-for="t in types"
          :key="t"
          :class="['type-btn', { active: form.feedbackType === t }]"
          @click="form.feedbackType = t"
        >
          {{ t }}
        </view>
      </view>
    </view>

    <!-- 2. 反馈内容 -->
    <view class="card">
      <view class="title">反馈内容</view>
      <textarea
        v-model="form.feedbackContent"
        placeholder="请详细描述您遇到的问题或建议..."
        maxlength="500"
        class="textarea"
      />
      <view class="count">{{ form.feedbackContent.length }}/500</view>
    </view>

    <!-- 3. 联系方式 -->
    <view class="card">
      <view class="title">联系方式</view>
      <input
        v-model="form.followupRequest"
        placeholder="手机号 / 邮箱（便于回访）"
        class="input"
      />
    </view>

    <!-- 4. 上传图片（最多 3 张） -->
    <view class="card">
      <view class="title">上传图片（选填）</view>
      <view class="img-wrap">
        <view
          v-for="(img, i) in form.images"
          :key="i"
          class="img-item"
        >
          <image :src="img" mode="aspectFill" />
          <text class="del" @click="form.images.splice(i, 1)">×</text>
        </view>
        <view
          v-if="form.images.length < 3"
          class="add"
          @click="chooseImg"
        >
          +
        </view>
      </view>
    </view>

    <!-- 5. 提交按钮 -->
    <view class="foot">
      <button
        class="submit"
        :disabled="!canSubmit"
        @click="submit"
      >
        提交反馈
      </button>
    </view>

    <!-- 6. 历史记录弹窗 -->
    <view v-if="showHistory" class="mask" @click="showHistory = false">
      <view class="modal" @click.stop>
        <view class="modal-head">
          <text>历史反馈</text>
          <text class="close" @click="showHistory = false">×</text>
        </view>
        <scroll-view scroll-y class="modal-body">
          <view v-for="h in history" :key="h.createTime" class="hist">
            <view class="h-title">{{ h.title }}</view>
            <view class="h-content">{{ h.content }}</view>
            <view class="h-footer">
              <text>{{ h.createTime }}</text>
              <text class="status">{{ h.statusText }}</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- 7. 悬浮历史按钮 -->
    <view class="float-btn" @click="showHistory = true">历史</view>
  </view>
</template>

<script setup>
import { reactive, computed, ref } from 'vue'
import {usePublicStore} from '../../../store/public'

/* 1. 数据 */
const app = getApp();
const userPublic = usePublicStore();
const types = ['投诉', '建议']
const form = reactive({
  feedbackType: '',
  feedbackContent: '',
  followupRequest: '',
  images: []
})
const history = ref([
  {
    title: '空调不制冷问题',
    feedbackContent: '教学楼A栋3楼空调制冷效果差，需要维修',
    statusText: '处理中',
    createTime: '2024-01-15 14:30'
  },
  {
    title: '楼道照明建议',
    feedbackContent: '建议在宿舍楼增加感应灯，节能环保',
    statusText: '已完成',
    createTime: '2024-01-10 09:15'
  }
])
const showHistory = ref(false)

/* 2. 能否提交 */
const canSubmit = computed(() => form.feedbackType && form.feedbackContent.trim())

/* 3. 选择图片 */
const chooseImg = () => {
  uni.chooseImage({
    count: 3 - form.images.length,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      form.images.push(...res.tempFilePaths)
    }
  })
}

/* 4. 提交 */
const submit = () => {

  if (!canSubmit.value) {
    uni.showToast({ title: '请完善必填信息', icon: 'none' })
    return
  }
  
	  const baseUrl = app.globalData.baseUrl;
	  	uni.request({
	  	    url: encodeURI(baseUrl + '/feedback/insert'),
	  		method:'POST',
	  	    data: {
				feedbackType : form.feedbackType,
				feedbackContent : form.feedbackContent,
				followupRequest : form.followupRequest,
	  			userId: userPublic.getUserInfo().id,
	  	    },
	  	    header:{
	  			"X-Tenant-Id": uni.getStorageSync("tenantId"),
	  			"token" : uni.getStorageSync("token")
	  			
	  		},
	  	    success: (res) => {
	  			console.log(res.data)
	  	    }
	  	});
  
  uni.showLoading({ title: '提交中' })
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({ title: '提交成功', icon: 'success' })
    history.value.unshift({
      title: form.feedbackType,
      feedbackContent: form.feedbackContent,
      statusText: '待处理',
      createTime: new Date().toLocaleString()
    })
    // 清空表单
    form.feedbackType = ''
    form.feedbackContent = ''
    form.followupRequest = ''
    form.images = []
  }, 1500)
}
</script>

<style scoped>
/* 通用 */
.page { background: #f5f5f5; padding: 20rpx 30rpx 160rpx; }

/* 卡片 */
.card { background: #fff; border-radius: 16rpx; padding: 30rpx; margin-bottom: 20rpx; }
.title { font-size: 30rpx; font-weight: bold; margin-bottom: 20rpx; color: #333; }

/* 类型按钮 */
.type-row { display: flex; gap: 30rpx; }
.type-btn { flex: 1; text-align: center; padding: 26rpx 0; border: 2rpx solid #eee; border-radius: 12rpx; font-size: 28rpx; color: #666; }
.type-btn.active { background: #3D76FF; color: #fff; border-color: #3D76FF; }

/* 输入框 */
.textarea { width: 100%; height: 220rpx; border: 2rpx solid #eee; border-radius: 8rpx; padding: 20rpx; font-size: 28rpx; }
.count { text-align: right; font-size: 24rpx; color: #999; margin-top: 10rpx; }
.input { width: 100%; height: 80rpx; border: 2rpx solid #eee; border-radius: 8rpx; padding: 0 20rpx; font-size: 28rpx; }

/* 图片上传 */
.img-wrap { display: flex; flex-wrap: wrap; gap: 20rpx; }
.img-item { position: relative; width: 200rpx; height: 200rpx; }
.img-item image { width: 100%; height: 100%; border-radius: 8rpx; }
.del { position: absolute; top: -15rpx; right: -15rpx; width: 40rpx; height: 40rpx; background: #ff4d4f; color: #fff; border-radius: 50%; text-align: center; line-height: 38rpx; }
.add { width: 200rpx; height: 200rpx; border: 2rpx dashed #ddd; border-radius: 8rpx; display: flex; align-items: center; justify-content: center; font-size: 60rpx; color: #999; }

/* 底部提交 */
.foot { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; padding: 20rpx 30rpx; border-top: 1rpx solid #eee; }
.submit { width: 100%; height: 80rpx; background: #3D76FF; color: #fff; border-radius: 40rpx; font-size: 30rpx; font-weight: bold; }
.submit:disabled { background: #ccc; }

/* 弹窗 */
.mask { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 999; }
.modal { width: 90%; max-height: 80%; background: #fff; border-radius: 16rpx; overflow: hidden; }
.modal-head { display: flex; justify-content: space-between; padding: 30rpx; border-bottom: 1rpx solid #eee; font-size: 32rpx; font-weight: bold; }
.close { font-size: 40rpx; color: #999; }
.modal-body { padding: 20rpx; max-height: 600rpx; }
.hist { background: #fafafa; padding: 20rpx; border-radius: 12rpx; margin-bottom: 20rpx; }
.h-title { font-weight: bold; margin-bottom: 10rpx; }
.h-content { font-size: 26rpx; color: #666; margin-bottom: 15rpx; }
.h-footer { display: flex; justify-content: space-between; font-size: 24rpx; color: #999; }
.status { color: #faad14; }

/* 悬浮历史按钮 */
.float-btn {
  position: fixed;
  right: 30rpx;
  bottom: 120rpx;
  width: 90rpx;
  height: 90rpx;
  background: #3D76FF;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,.15);
}
</style>